<template>
  <div>
    <MyHeader
      background='#1d7bff'
      title='购物车'
    ></MyHeader>
    <div class="main"></div>
    <MyGoods
      v-for="obj in list"
      :key="obj.id"
      :goodsObj='obj'
    ></MyGoods>
    <MyFoooter
      @changeCheck='changeFn'
      :arr='list'
    ></MyFoooter>

  </div>
</template>

<script>
import MyHeader from './components/MyHeader';
import MyGoods from './components/MyGoods';
import MyFoooter from './components/MyFooter';
export default {
  components: {
    MyHeader,
    MyGoods,
    MyFoooter
  },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.$axios({
      url: '/api/cart'
    }).then(res => {
      console.log(res);
      this.list = res.data.list
    })
  },
  methods: {
    changeFn (bool) {
      this.list.forEach(obj => obj.goods_state = bool)
    }
  }

}
</script>


<style scoped>
.main {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>